<template>
   <el-card style="height: 70px; margin-bottom: 10px;">
      <el-form :inline="true" class="search-form">
         <el-form-item label="用户名">
            <el-input placeholder="请输入搜索职位的关键字" />
         </el-form-item>

         <el-form-item>
            <el-button type="primary" size="default">搜索</el-button>
            <el-button type="primary" size="default">重置</el-button>
         </el-form-item>
      </el-form>
   </el-card>

   <el-card>
      <el-button type="primary" size="default" icon="Plus" @click="addRole">添加职位</el-button>
      <el-table border style="margin: 10px 0px;" :data="dataArr">
         <el-table-column type="index" width="80" align="center" label="#">
         </el-table-column>

         <el-table-column label="ID" align="center" prop="id">
         </el-table-column>

         <el-table-column label="角色名称" align="center" prop="role">
         </el-table-column>

         <el-table-column label="创建时间" align="center" show-overflow-tooltip prop="creatDate">
         </el-table-column>

         <el-table-column label="更新时间" align="center" show-overflow-tooltip prop="updateDate">
         </el-table-column>

         <el-table-column label="操作" width="300px" align="center">
            <template #="{ row }">
               <el-button type="primary" size="small" icon="User" @click="allocationRole">分配权限</el-button>
               <el-button type="primary" size="small" icon="Edit" @click="updateRole(row)">编辑</el-button>
               <el-button type="primary" size="small" icon="Delete">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
         :background="true" layout="prev, pager, next, jumper, ->,sizes,total" :total="400" />
   </el-card>

   <!-- 添加及更新 -->
   <el-dialog v-model="dialogVisible" title="添加职位">
      <el-form>
         <el-form-item label="职位名称">
            <el-input placeholder="请输入职位名称" v-model="inputText" />
         </el-form-item>
      </el-form>
      <template #footer>
         <div class="dialog-footer">
            <el-button @click="dialogVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="dialogVisible = false"> 确认 </el-button>
         </div>
      </template>
   </el-dialog>

   <!-- 分配职位 -->
   <el-drawer v-model="drawer">
      <template #header>
         <h4>分配权限</h4>
      </template>
      <template #default>

         <!-- 树形空间 -->
         <el-tree :data="data" show-checkbox node-key="id" default-expand-all :default-checked-keys="[5]"
            :props="defaultProps" />

      </template>
      <template #footer>
         <div style="flex: auto">
            <el-button>cancel</el-button>
            <el-button type="primary">confirm</el-button>
         </div>
      </template>
   </el-drawer>


</template>

<script setup lang='ts' name='Role'>
import { onMounted, ref } from 'vue';
import type { User } from '@/api/acl/user';
import { userArr } from '@/api/acl/user/tempData';

let pageNo = ref<number>(1)
let pageSize = ref<number>(5)

/// 数据
let dataArr = ref<User[]>([])

/// 输入框
let inputText = ref<string>('')

/// 控制添加的显示隐藏
let dialogVisible = ref<boolean>(false)

/// 抽屉
let drawer = ref<boolean>(false)

onMounted(() => {
   dataArr.value = userArr
})

/// 添加职位
const addRole = () => {
   dialogVisible.value = true
   inputText.value = ''
}

/// 更新职位
const updateRole = (row: User) => {
   dialogVisible.value = true
   inputText.value = row.role as string
}

/// 分配权限
const allocationRole = () => {
   drawer.value = true
}

// 树形数据
const defaultProps = {
   children: 'children',
   label: 'label',
}

const data = [
   {
      id: 1,
      label: 'Level one 1',
      children: [
         {
            id: 4,
            label: 'Level two 1-1',
            children: [
               {
                  id: 9,
                  label: 'Level three 1-1-1',
               },
               {
                  id: 10,
                  label: 'Level three 1-1-2',
               },
            ],
         },
      ],
   },
   {
      id: 2,
      label: 'Level one 2',
      children: [
         {
            id: 5,
            label: 'Level two 2-1',
         },
         {
            id: 6,
            label: 'Level two 2-2',
         },
      ],
   },
   {
      id: 3,
      label: 'Level one 3',
      children: [
         {
            id: 7,
            label: 'Level two 3-1',
         },
         {
            id: 8,
            label: 'Level two 3-2',
         },
      ],
   },
]

</script>

<style scoped lang='scss'>
.search-form {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
</style>